<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>中国移动</title>
  <link rel="stylesheet" href="css/over.css">
  <link rel="stylesheet" href="css/index.css">
  <link rel="stylesheet" href="css/flaotBox.css">
  <link rel="stylesheet" href="css/FloorBox.css">
  <link rel="stylesheet" href="css/likes.css">
  <link rel="stylesheet" href="css/feature.css">
  <link rel="stylesheet" href="css/notice.css">
  <link rel="stylesheet" href="css/countryNews.css">
  <link rel="stylesheet" href="css/bottom.css">
  <style>
    #favourable {
      width: 1200px;
      height: 170px;
      margin: 20px auto 0;
    }

    .favour_lf {
      float: left;
      width: 235px;
      height: 170px;
    }

    .favour_lf>a>img {
      display: block;
      width: 100%;
      margin: 0 auto;
    }

    .favour_rt {
      float: right;
      width: 960px;
      height: 170px;
      position: relative;
      overflow: hidden;
      cursor: pointer;
    }

    .favour_mater {
      width: 2420px;
      height: auto;
      position: absolute;
    }

    .favour_box {
      float: left;
      width: 235px;
      height: 170px;
      margin: 0 7px 0 0;
      position: relative;
      background: rgb(244, 244, 244);
    }

    .fas {
      width: 215px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .favour_box>h3 {
      padding: 13px 10px 0;
      font-size: 18px;
      font-weight: bold;
      color: #222222;
    }

    .favour_box>p {
      padding: 6px 10px 0;
      font-size: 14px;
      color: #808080;
    }

    .favour_box>img {
      width: 120px;
      height: 100px;
      position: absolute;
      right: 0px;
      bottom: 0px;
    }

    .custer {
      position: absolute;
      top: 70px;
      height: 35px;
      width: 28px;
      cursor: pointer;
      z-index: 10;
    }

    .favouPrev {
      left: 0px;
      background: url("image/favour/fav_prev.png") no-repeat;
    }

    .favouNext {
      right: 0px;
      background: url("image/favour/fav_next.png") no-repeat;
    }
  </style>
</head>

<body>
  <div id="onepice" v-cloak>
    <!-- 头部导航栏 -->
    <div id="header">
      <div id="header_top">
        <div class="contain">
          <div class="con_left">
            <span class="wel">欢迎来到中国移动网站</span>
            <div id="login"><a href="javascript:;">请登录</a></div>
          </div>
          <div class="con_right">
            <a href="javascript:;" class="top_sun">个人中心</a>
            <div class="top_twice">
              <a href="javascript:;" class="client">中国移动客户端</a>
              <div id="code" @mouseover="overs" @mouseout="outs">
                <img src="image/header/code.png" alt="">
                <p>扫一扫，随时查话费！</p>
              </div>
            </div>
            <a href="javascript:;" class="top_sun">积分商城</a>
            <a href="javascript:;" class="lan_c">能力开放商店</a>
            <a href="javascript:;" class="top_sun">关于中国移动</a>
            <a href="javascript:;" class="top_sun">证照信息</a>
            <a href="javascript:;" class="top_sun">联系我们</a>
            <a href="javascript:;" class="top_sun">政企客户</a>
            <a href="javascript:;" class="top_sun s-f">ENGLISH</a>
          </div>
        </div>
      </div>
      <div id="head_down">
        <div id="head_con">
          <a href="index.html" class="index"><img src="image/header/logo.png" alt=""></a>
          <div class="dropdown">
            <div id="slidedown">北京</div>
            <ul class="slidemenu" v-show="flag">
              <li><span>全部省份</span></li>
              <li>
                <dl class="bordl">
                  <dt><span>A-G</span></dt>
                  <dd><a href="javascript:void(0);" v-for="item in newProvince" v-if="item.id<='G'">{{item.title}} ></a>
                  </dd>
                </dl>
              </li>
              <li>
                <dl class="bordl">
                  <dt><span>H-J</span></dt>
                  <dd><a href="javascript:void(0);" v-for="item in newProvince"
                      v-if="item.id>'G' && item.id <='J'">{{item.title}} ></a>
                  </dd>
                </dl>
              </li>
              <li>
                <dl class="bordl">
                  <dt><span>L-S</span></dt>
                  <dd><a href="javascript:void(0);" v-for="item in newProvince"
                      v-if="item.id>'J' && item.id <='S'">{{item.title}} ></a>
                  </dd>
                </dl>
              </li>
              <li>
                <dl class="bordl">
                  <dt><span>T-Z</span></dt>
                  <dd><a href="javascript:void(0);" v-for="item in newProvince"
                      v-if="item.id>'S' && item.id <='Z'">{{item.title}} ></a>
                  </dd>
                </dl>
              </li>
            </ul>
          </div>
          <div id="searchdiv">
            <div class="searchthing">
              <input type="text" value="移动王卡" maxlength="20"
                onfocus="javascript:if(this.value == '移动王卡'){this.value=''}"
                onblur="javascript:if(this.value == ''){this.value='移动王卡'}" title="关键字必须至少有一个汉字或英文字母">
              <input type="submit" name="" id="searchsub" value="">
            </div>
            <div class="searchhot">
              <a href="javascript:;">5G正式商用</a>
              <a href="javascript:;">信用购机</a>
              <a href="javascript:;">携号入网</a>
              <a href="javascript:;">资费专区</a>
              <a href="javascript:;">光宽带</a>
              <a href="javascript:;">在线充值</a>
            </div>
          </div>
        </div>
        <div id="head_nav">
          <a href="javascript:;" class="allProduce">全部产品服务</a>
          <ul class="nav">
            <li>
              <a href="javascript:;">首页</a>
            </li>
            <li>
              <a href="javascript:;">移动商城</a>
            </li>
            <li>
              <a href="javascript:;">网上营业厅</a>
            </li>
            <li>
              <a href="javascript:;">我的移动</a>
            </li>
            <li>
              <a href="javascript:;">服务中心</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 悬浮栏 -->
    <div class="floatBox">
      <div class="boxheader">
        <a href="index.html">
          <img src="image/floatheader/logo.png" alt="" class="floatlogo">
        </a>
        <ul class="floatUl">
          <li><a href="index.html">首页</a></li>
          <li><a href="javascript:void(0);">移动商城</a> </li>
          <li><a href="javascript:void(0);">网上营业厅</a></li>
          <li> <a href="javascript:void(0);">我的移动</a></li>
          <li> <a href="javascript:void(0);">服务中心</a></li>
        </ul>
        <div class="floatdiv">
          <div class="divhead">
            <input type="text" value="移动王卡" maxlength="20" onfocus="javascript:if(this.value == '移动王卡'){this.value=''}"
              onblur="javascript:if(this.value == ''){this.value='移动王卡'}" title="关键字必须至少有一个汉字或英文字母">
            <input type="submit" name="" id="floatbtn" value="">
          </div>
        </div>
      </div>
    </div>
    <!-- 轮播图区/菜单栏部分 -->
    <div id="content" ref="content">
      <div id="conArticle">
        <div class="takeLook">
          <ul class="look_menu">
            <li v-for="(menu,index) in lookmenus" @mouseover="getIndex(index)" @mouseout="setIndex(index)"
              ref="menuStyle">
              <a href="javascript:;">
                <img :src="menu.img" alt="">
                &nbsp;{{menu.text}}
              </a>
            </li>
          </ul>
          <div class="menuRight" v-for="(over,index) in menuOver" @mouseover="getIndex(index)"
            @mouseout="setIndex(index)" v-show="over.menuShow" ref="menuRight">
            <div class="menu_conte" v-for="ove in over" v-show="over.menuShow" ref="menu_conte">
              <dl class="menuDl" v-for="pruduce in ove">
                <dt>{{pruduce.totle}}</dt>
                <dd>
                  <a href="javascript:;" v-for="genre in pruduce.family" ref="genre">{{genre}}</a>
                </dd>
              </dl>
            </div>
          </div>
        </div>
        <div class="takeImg" ref="takeImg">
          <span class=img_left @click="prev"></span>
          <div class="lookImage" v-for="(imgs,index) in lookimg" ref="lookImage" @mouseover="stopTimer"
            @mouseout="startTimer">
            <a href="javascript:;">
              <img :src="imgs.url" :alt="imgs.title" class="changimg" :title="imgs.title">
            </a>
          </div>
          <span class=img_right @click="next"></span>
          <ul class="mask">
            <li v-for="(tout,index) in touch" ref="maku" :title="tout" @click="touchOn(index)"></li>
          </ul>
        </div>
        <div class="takeFind">
          <div class="find_icons">
            <ul class="test">
              <li v-for="find in finds" v-cloak>
                <a href="javascript:;" class="icons" ref="icons">
                  <img :src="find.img" alt="">
                  <p>{{find.text}}</p>
                </a>
              </li>
            </ul>
          </div>
          <div class="find_down">
            <div id="down_title">
              <a href="javascript:;" class="tags texts" @click="clickPrice" ref="tags">话 费</a>
              <a href="javascript:;" class="tags" @click="clickFlow" ref="tabs">流 量</a>
            </div>
            <div class="downbox">
              <form action="javascript:void(0);">
                <input type="text" value="请输入手机号码" class="writ_phone"
                  onfocus="javascript:if(this.value == '请输入手机号码'){this.value='';this.style.color='rgb(51, 51, 51)'} "
                  onblur="javascript:if(this.value == ''){this.value='请输入手机号码';this.style.color=' #dadada'}">
                <div class="money_num" ref="money_num">
                  <a href="javascript:;" v-for="price in priceNum">{{price}}</a>
                </div>
                <div class="invest"><a href="javascript:;">立刻充值</a></div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 优惠专区 -->
    <div id="favourable">
      <div class="favour_lf">
        <a href="javascript:;">
          <img src="image/favour/favour_lf.jpg" alt="优惠专区" title="优惠专区">
        </a>
      </div>
      <div class="favour_rt">
        <div class="custer favouPrev"></div>
        <div class="favour_mater" ref="favour_mater">
          <div class="favour_box" v-for="favou in favourData" ref="favour_box">
            <h3 class="favs">{{favou.title}}</h3>
            <p class="favs">{{favou.produce}}</p>
            <img :src="favou.img" :alt="favou.produce" :title="favou.title">
          </div>
        </div>
        <div class="custer favouNext"></div>
      </div>
    </div>
    <!-- 楼层 -->
    <div id="maintent">
      <!-- 1F -->
      <div class="mainOneF">
        <h3 class="OneFtitl">
          <a href="javascript:void(0);"><span>1F 享优惠</span></a>
          <span class="FtitlR">
            <a href="javascript:;">全部</a>
            <a href="javascript:;">提速降费</a>
          </span>
        </h3>
        <div class="OneFartic floor" ref="col2">
          <div class="articTex_OE">
            <div class="OE_top">
              <a href="javascript:;">
                <img src="image/maintent/OneF/OneF_down1.jpg" alt="" title="荣耀V30 5G手机">
              </a>
            </div>
            <div class="OE_down">
              <a href="javascript:;" class="record">
                <h4>一台多才的行车记录仪</h4>
                <p>微光夜视 停车监控 手机直连</p>
                <img src="image/maintent/OneF/OneF_down2.jpg" alt="" title="一台多才的行车记录仪">
              </a>
            </div>
          </div>
          <div class="articTex_TW">
            <div class="TW_top">
              <a href="javascript:;" class="buys">
                <h4>5G手机优惠购</h4>
                <p>购机最高优惠3780元</p>
                <img src="image/maintent/OneF/OneF_down3.jpg" alt="" title="5G手机优惠购">
              </a>
            </div>
            <div class="TW_down">
              <a href="javascript:;" class="buys">
                <h4>移动王卡</h4>
                <p>1元1GB/天，30GB定向流量</p>
                <img src="image/maintent/OneF/OneF_down4.jpg" alt="" title="一台多才的行车记录仪">
              </a>
            </div>
          </div>
          <div class="articTex_TW">
            <div class="TW_whole">
              <a href="javascript:;" class="cards">
                <h4>宝藏卡</h4>
                <p>畅享200GB不限速</p>
                <img src="image/maintent/OneF/OneF_down5.png" alt="" title="宝藏卡">
              </a>
            </div>
          </div>
          <div class="articTex_TW">
            <div class="TW_top">
              <a href="javascript:;" class="buys">
                <h4>和目智能路由器</h4>
                <p>信号强 覆盖广</p>
                <img src="image/maintent/OneF/OneF_down6.jpg" alt="" title="和目智能路由器">
              </a>
            </div>
            <div class="TW_down">
              <a href="javascript:;" class="buys">
                <h4>5G智享套卡</h4>
                <p>专属权益，尊享服务</p>
                <img src="image/maintent/OneF/OneF_down7.jpg" alt="" title="5G智享套卡">
              </a>
            </div>
          </div>
        </div>
      </div>
      <!-- 2F -->
      <div class="mainOneF">
        <h3 class="OneFtitl">
          <a href="javascript:void(0);"><span>2F 业务推荐</span></a>
          <span class="FtitlR">
            <a href="javascript:;">全部</a>
          </span>
        </h3>
        <div class="OneFartic floor">
          <div class="articTex_OE">
            <div class="OE_top">
              <a href="javascript:;">
                <img src="image/maintent/TwoF/TwoF_down1.png" alt="" title="北京移动手厅">
              </a>
            </div>
            <div class="OE_down">
              <a href="javascript:;" class="record pwds">
                <h4>客服密码</h4>
                <p>密码忘记，一键找回</p>
                <img src="image/maintent/TwoF/TwoF_down2.png" alt="" title="客服密码">
              </a>
            </div>
          </div>
          <div class="articTex_TW" v-for="twoF in TwoFTex">
            <div class="TW_top">
              <a href="javascript:;" class="buys">
                <h4>{{twoF.Two_topH4}}</h4>
                <p>{{twoF.Two_topP}}</p>
                <img :src="twoF.Two_topImg" alt="" :title="twoF.Two_topH4">
              </a>
            </div>
            <div class="TW_down">
              <a href="javascript:;" class="buys">
                <h4>{{twoF.Two_downH4}}</h4>
                <p>{{twoF.Two_downP}}</p>
                <img :src="twoF.Two_downImg" alt="" :title="twoF.Two_downH4">
              </a>
            </div>
          </div>
        </div>
      </div>
      <!-- 3F -->
      <div class="mainOneF">
        <h3 class="OneFtitl">
          <a href="javascript:void(0);"><span>3F 手机专区</span></a>
          <span class="FtitlR">
            <a href="javascript:;" v-for="Ftitl in FtitlR">{{Ftitl}}</a>
          </span>
        </h3>
        <div class="OneFartic floor">
          <div class="articTex_OE">
            <div class="OE_topT">
              <a href="javascript:;" class="ThreeTal" v-for="na in OE_topT">
                <h4>{{na.ThreeTalH4}} <br>{{na.ThreeTalCA}}</h4>
                <p>{{na.ThreeTalP}}</p>
                <span>{{na.ThreeTalSpan}}</span>
                <img :src="na.Talimg" alt="" :title="na.ThreeOver">
              </a>
            </div>
            <div class="OE_downT">
              <a href="javascript:;" class="TreeFSmall" v-for="Ftoal in ThreeFImg">
                <img :src="Ftoal.img" alt="" :title="Ftoal.titl">
              </a>
            </div>
          </div>
          <div class="articTex_TW" v-for="tree in ThreeFTex">
            <div class="TW_top">
              <a href="javascript:;" class="buys">
                <h4>{{tree.Three_topH4}}</h4>
                <p>{{tree.Three_topP}}</p>
                <span>{{tree.Three_topSpan}}</span>
                <img :src="tree.Three_topImg" alt="" :title="tree.Three_topH4">
              </a>
            </div>
            <div class="TW_down">
              <a href="javascript:;" class="buys">
                <h4>{{tree.Three_downH4}}</h4>
                <p>{{tree.Three_downP}}</p>
                <span>{{tree.Three_downSpan}}</span>
                <img :src="tree.Three_downImg" alt="" :title="tree.Three_downH4">
              </a>
            </div>
          </div>
        </div>
      </div>
      <!-- 4F -->
      <div class="mainOneF">
        <h3 class="OneFtitl">
          <a href="#"><span>4F 智能硬件</span></a>
          <span class="FtitlR">
            <a href="javascript:;">全部</a>
            <a href="#">智联品质生活</a>
          </span>
        </h3>
        <div class="OneFartic floor">
          <div class="articTex_OE">
            <div class="four_bat" v-for="fu in FourData">
              <a :href="fu.hre" class="fou_crea">
                <h4 v-show="fu.fouTemp">{{fu.fouH4}}</h4>
                <p>{{fu.fouP}}</p>
                <span>{{fu.fouSpan}}</span>
                <img :src="fu.img" alt="" :title="fu.fouH4">
              </a>
            </div>
          </div>
          <div class="articTex_TW">
            <div class="TW_top">
              <a href="javascript:;" class="buys">
                <h4>和目智能门锁</h4>
                <p>蓝牙开锁 无损安装</p>
                <span>699元</span>
                <img src="image/maintent/FourF/FourF_down5.png" alt="" title="和目智能门锁">
              </a>
            </div>
            <div class="TW_down">
              <a href="javascript:;" class="buys">
                <h4>和目智能路由器双频</h4>
                <p>双频四天线  无惧穿墙</p>
                <span>199元</span>
                <img src="image/maintent/FourF/FourF_down6.png" alt="" title="和目智能路由器双频">
              </a>
            </div>
          </div>
          <div class="articTex_TW">
            <div class="TW_whole">
              <a href="javascript:;" class="cards">
                <h4>有品智能体脂秤</h4>
                <p>多方位覆盖所需29项身体指标</p>
                <span>88元</span>
                <img src="image/maintent/FourF/FourF_down7.png" alt="" title="有品智能体脂秤">
              </a>
            </div>
          </div>
          <div class="articTex_TW">
            <div class="TW_top">
              <a href="javascript:;" class="buys">
                <h4>咪咕漫威珍藏版礼盒</h4>
                <p>充电宝、数据线、音箱一盒配齐</p>
                <span>299元</span>
                <img src="image/maintent/FourF/FourF_down8.jpg" alt="" title="咪咕漫威珍藏版礼盒">
              </a>
            </div>
            <div class="TW_down">
              <a href="javascript:;" class="buys">
                <h4>小度在家</h4>
                <p>向往的生活同款智能音箱</p>
                <span>379元</span>
                <img src="image/maintent/FourF/FourF_down9.jpg" alt="" title="小度在家">
              </a>
            </div>
          </div>
        </div>
      </div>
      <!-- 5F -->
      <div class="mainOneF">
        <h3 class="OneFtitl">
          <a href="javascript:void(0);"><span>5F 咪咕娱乐</span></a>
          <span class="FtitlR">
            <a href="javascript:;" v-for="gam in GamesF">{{gam}}</a>
          </span>
        </h3>
        <div class="OneFartic floor">
          <ul class="FivselectL">
            <li @mouseover="selectStyle(index)" ref="selectOver" v-for="(select,index) in selectL" :data-index="index">
              <a href="javascript:;">
                <h4 class="selectLH4" ref="selectLH4">{{select.title}}</h4>
              </a>
              <a href="javascript:;">
                <p class="selectLP">{{select.prod}}</p>
              </a>
            </li>
          </ul>
          <div class="FivselectC" v-for="select in selectCard" v-show="select.ove">
            <div class="selectC_inner" v-for="card in select.card1">
              <h4 class="innerT">
                <span>{{card.title}}</span>
                <span>
                  <em v-for="(ra,index) in card.em" v-show="ra.flas" :key="index">{{ra.first}}</em>&nbsp;&nbsp;
                  <img src="image/maintent/FiveF/prev.jpg" alt="" @click="txtPre">&nbsp;
                  <img src="image/maintent/FiveF/next.jpg" alt="" @click="txtNext">
                </span>
              </h4>
              <div class="innerD" v-for="opp in card.img" v-show="opp.flug">
                <dl class="innerTake" v-for="tak in opp.hre">
                  <dt>
                    <a href="javascript:void(0);" class="dtimg">
                      <img :src="tak.inp" alt="" :title="tak.total">
                    </a>
                  </dt>
                  <dd>
                    <a href="javascript:void(0);" class="dtimg">
                      <h5>{{tak.total}}</h5>
                      <p>{{tak.taking}}</p>
                    </a>
                  </dd>
                </dl>
              </div>
            </div>
          </div>
          <div class="FivselectR">
            <div class="FiveT">
              <div class="Timg">
                <ul class="TmgUL">
                  <li v-for="hre in TmgHre">
                    <a href="javascript:void(0);" class="TmgA">
                      <img :src="hre.up" alt="" :title="hre.titl">
                    </a>
                  </li>
                </ul>
              </div>
              <div class="Tmask">
                <ul class="Tmask_nu">
                  <li class="TmaskColor"></li>
                </ul>
              </div>
            </div>
            <div class="FiveD" v-for="pou in selectPour">
              <h4 class="pour">
                <span>{{pou.title}}</span>
                <span>
                  <em v-for="(pa,index) in pou.em" v-show="pa.flas" :key="index">{{pa.first}}</em>&nbsp;&nbsp;
                  <img src="image/maintent/FiveF/prev.jpg" alt="" @click="pourPre">&nbsp;
                  <img src="image/maintent/FiveF/next.jpg" alt="" @click="pourNext">
                </span>
              </h4>
              <div class="sour">
                <div class="sour_inner" v-for="dp in pou.img" v-show="dp.flug">
                  <div class="sourbox" v-for="sap in dp.hre">
                    <a href="javascript_void(0);" class="rape">
                      <img :src="sap.inp" alt="" :title="sap.total">
                    </a>
                    <p><a href="javascript:;" :title="sap.total">{{sap.total}}</a></p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 猜你喜欢 -->
    <div class="likes">
      <h3 class="likeT">
        <span class="liketitl">猜你喜欢</span>
        <a href="javascript:void(0);" class="likechange" @click="likeChan">换一批</a>
      </h3>
      <div class="likeD" v-for="dta in likeData" v-show="dta.sug">
        <div class="like_block" v-for="lik in dta.likes">
          <a :href="lik.hre">
            <h4 :title="lik.total">{{lik.total}}</h4>
            <p class="p1">{{lik.price}}</p>
            <img :src="lik.img" alt="">
            <p class="p2" :title="lik.title">
              {{lik.prod}}
            </p>
          </a>
        </div>
      </div>
    </div>
    <!-- 特色专区 -->
    <div class="feature">
      <h2 class="featuT">特色专区</h2>
      <div class="featuD">
        <dl class="featudl" v-for="feat in featData">
          <dt>
            <a :href="feat.hre">
              <img :src="feat.img" alt="" :title="feat.total">
            </a>
          </dt>
          <dd>
            <a :href="feat.hre">
              <h4>{{feat.total}}</h4>
              <p>{{feat.prdu}}</p>
            </a>
          </dd>
        </dl>
      </div>
    </div>
    <!-- 公告 -->
    <div class="notice">
      <a href="#" class="newstic">
        <span>公告</span>
      </a>
      <ul class="newspro">
        <li class="news_titl" v-for="noti in noticeData" v-show="noti.flag">
          <a :href="noti.hre" :title="noti.title">{{noti.title}}</a>
          <em>{{noti.time}}</em>
        </li>
      </ul>
      <div class="news_change">
        <span @click="noticeLef">
          < </span> <span @click="noticeRig">>
        </span>
      </div>
    </div>
    <!-- 国资动态 -->
    <div class="countryNews">
      <h3>
        <a href="#" class="more">查看更多>></a>
      </h3>
      <span class="countrylogo">
        <img src="image/countryNews.jpg" alt="">
      </span>
      <ul class="country_rows">
        <li v-for="coun in countryData">
          <em>-</em>
          <a :href="coun.hre" :title="coun.title">{{coun.title}}</a>
          <span>{{coun.time}}</span>
        </li>
      </ul>
    </div>
    <!-- 链接区 -->
    <div class="bottomBox">
      <div class="bottomRush" v-for="boto in bottomProduce">
        <h2>{{boto.title}}</h2>
        <div class="rushBtoo">
          <a :href="pro.hre" v-for="pro in boto.news" target="_blank">
            {{pro.wal}}
            <img :src="pro.img" alt="" v-show="pro.sows">
          </a>
        </div>
      </div>
    </div>
    <!-- 页脚 -->
    <footer>
      <div class="footOve">
        <p class="footP">
          <span v-for="ft in footDataP1" class="footO">
            <a :href="ft.hre">{{ft.dta}}</a>
            <em ref="bar">&nbsp;|&nbsp;</em>
          </span>
        </p>
        <p class="footP">
          <span>掌上营业厅：</span>
          <a href="#">wap.10086.cn</a>
          <span>语音自助服务：10086 短信营业厅：10086</span>
          <a href="#">自助终端</a>
          <a href="#">营业厅</a>
          <a href="#">中国移动客户端下载</a>
        </p>
        <p class="footbear">
          <span>Copyright©1999-2020 中国移动 版权所有 </span>
          <span>本网站支持IPv6访问</span>
        </p>
        <div class="agent">
          <span>中华人民共和国增值电信业务经营许可证</span>
          <span>经营许可证编号：A2.B1.B2-20100001</span>
        </div>
        <div class="agent targ">
          <div class="col-lg-6">
            <a href="#">
              <img src="image/footer.png" alt="">
            </a>
          </div>
          <div class="col-lg-3">
            <p>
              <a href="#">京ICP备05002571号</a>
            </p>
          </div>
        </div>
      </div>
    </footer>
  </div>
  </div>

  </div>
  <script src="js/vue.js"></script>
  <!-- 封装获取汉字首字母大写 -->
  <script src="js/pinyin.js"></script>
  <!-- 动画函数 -->
  <script src="js/animation.js"></script>
  <!-- 封装滚动效果 -->
  <script src="js/getPageScroll.js"></script>
  <!-- header -->
  <!-- content -->
  <script>
    const content = new Vue({
      el: "#onepice",  // 盒子
      data: {    // 数据
        province: [  // 省份
          "河北", "山西", "辽宁", "吉林", "黑龙江", "江苏", "浙江", "安徽", "福建",
          "江西", "山东", "河南", "湖北", "湖南", "广东", "海南", "四川", "贵州",
          "云南", "陕西", "甘肃", "青海", "内蒙古", "广西", "西藏",
          "宁夏", "新疆", "北京", "天津", "上海", "重庆"
        ],
        newProvince: [],  // 排序后的省份
        flag: false,  // 开关控制显示隐藏
        lookimg: [   // 轮播图数据
          { url: "image/header/look1.jpg", title: "5G套餐更优惠", bg: "rgb(65, 70, 183)" },
          { url: "image/header/look2.png", title: "花卡宝藏版", bg: "rgb(117, 182, 126)" },
          { url: "image/header/look3.jpg", title: "中国移动权益招募公告", bg: "rgb(0, 101, 227)" },
          { url: "image/header/look4.png", title: "5G畅享套餐", bg: "rgb(103, 59, 183)" },
          { url: "image/header/look5.jpg", title: "iPhone SE新品来袭", bg: "rgb(242, 242, 242)" },
          { url: "image/header/look6.png", title: "移动PLUS会员", bg: "rgb(3, 3, 1)" },
          { url: "image/header/look7.jpg", title: "每天答一答，流量好礼等你拿！", bg: "rgb(18, 24, 84)" },
          { url: "image/header/look8.png", title: "移动王卡", bg: "rgb(56, 81, 182)" },
          { url: "image/header/look9.jpg", title: "家宽自助服务", bg: "rgb(50, 112, 255)" },
        ],
        timer: null,
        num: 0,
        touch: [   // 轮播图title
          "5G套餐更优惠", "花卡宝藏版", "中国移动权益招募公告", "5G畅享套餐",
          "iPhone SE新品来袭", "移动PLUS会员", "每天答一答，流量好礼等你拿！",
          "移动王卡", "家宽自助服务"
        ],
        taken: true,
        finds: [   // 查询信息
          { img: "image/header/find1.gif", text: "话费查询" },
          { img: "image/header/find2.gif", text: "流量查询" },
          { img: "image/header/find3.png", text: "国际/港澳台" },
          { img: "image/header/find4.gif", text: "积分兑换" },
          { img: "image/header/find5.gif", text: "优惠专区" },
          { img: "image/header/find6.gif", text: "业务办理" },
        ],
        priceNum: [  // 人民币数额
          "30元", "50元", "100元", "300元", "其他"
        ],
        flowNum: [   // 流量数额
          "1G", "2G", "3G", "5G", "10G"
        ],
        doubleNum: null,  // 数据转换
        nav: true,
        lookmenus: [   // 业务办理
          { img: "image/header/navlook1.png", text: "办业务" },
          { img: "image/header/navlook2.png", text: "买手机" },
          { img: "image/header/navlook3.png", text: "套餐/靓号" },
          { img: "image/header/navlook4.png", text: "家庭业务" },
          { img: "image/header/navlook5.png", text: "智能硬件" },
          { img: "image/header/navlook6.png", text: "查询服务" },
          { img: "image/header/navlook7.png", text: "特色专区" },
        ],
        menuOver: [   // 二级菜单栏
          {
            menuEvery: [
              {
                totle: "主套餐", family: ["畅享套餐", "更多"]
              }, {
                totle: "流量业务", family: ["流量月包", "流量直充", "更多"]
              },
              {
                totle: "家庭业务", family: ["100M光宽带", "200M光宽带", "300M光宽带", "更多"]
              },
              {
                totle: "国际/港澳台", family: ["开通漫游功能", "一带一路多国流量", "欧洲多国流量包", "更多"]
              },
              {
                totle: "基础服务", family: ["和多号", "客户密码业务", "更多"]
              },
              {
                totle: "生活&娱乐", family: ["咪咕圈圈", "咪咕音乐", "视频流量包", "更多"]
              },
              {
                totle: "优惠活动", family: ["1元1GB王卡", "更多"]
              }
            ],
            menuShow: false
          },
          {
            menuEvery: [
              {
                totle: "热点关注", family: ["流量安心包", "iPhone11", "红米K30", "更多"]
              }, {
                totle: "经典品牌", family: ["海尔", "荣耀", "联想", "美图", "酷派", "锤子", "CMCC", "金立", "诺基亚", "中兴",
                  "天语", "飞利浦", "三星", "OPPO", "VIVO", "魅族", "华为", "苹果", "小米", "更多"]
              },
              {
                totle: "价位段", family: ["3000以上", "2000-2999", "1000-1999", "700-999", "300-699", "0-299", "更多"]
              },
              {
                totle: "屏幕尺寸", family: ["5.6英寸以上", "5.0-5.6英寸", "4.1-4.9英寸", "3.0-4.0英寸", "3.0英寸以下", "更多"]
              },
              {
                totle: "热门机型", family: ["华为P30", "华为Nova4e", "荣耀V20", "iPhoneXR", "更多"]
              },
              {
                totle: "精品推荐", family: ["套餐余量查询", "交费记录查询", "更多"]
              }
            ],
            menuShow: false
          },
          {
            menuEvery: [
              {
                totle: "号段", family: ["188", "187", "184", "183", "182", "178", "159", "158", "157", "152", "151", "150", "147", "139", "138", "137", "136", "135", "134", "更多"]
              },
              {
                totle: "尾号规则", family: ["尾号ABAC", "尾号ABCD", "尾号AAAA", "尾号ABAB", "尾号ABBA", "尾号AAAB", "尾号AABB", "更多"]
              },
              {
                totle: "谐音选号", family: ["一往情深1573", "我要发518", "要发要发6868", "一路发168", "六六大顺666", "发发发888", "生生世世3344", "我爱你520", "一生一世1314", "更多"]
              },
              {
                totle: "套餐", family: ["移动王卡", "更多"]
              }
            ],
            menuShow: false
          },
          {
            menuEvery: [
              {
                totle: "宽带办理", family: ["家庭宽带", "宽带续费", "更多"]
              },
              {
                totle: "带宽", family: ["100M光宽带", "200M光宽带", "300M光宽带", ""]
              },
              {
                totle: "宽带服务", family: ["开通小区查询", "宽带密码管理", ""]
              },
              {
                totle: "家庭尊享", family: ["家庭宽带", ""]
              }
            ],
            menuShow: false
          },
          {
            menuEvery: [
              {
                totle: "热门推荐", family: ["中国移动儿童手表", "乐心手环", "和目C31摄像头", ""]
              },
              {
                totle: "品牌", family: ["三星", "华为", "Nokia", "LG", "HTC", "摩托罗拉", "中兴", "联想", "其他", "苹果", "海信", "酷派", "小米", "更多"]
              },
              {
                totle: "手机配件", family: ["中国移动儿童手表", "乐心手环", "壳膜套装", "小米手环2", "VR眼镜", "小米移动电源2", "绅士熊警报器", "绅士熊智能版", "更多"]
              },
              {
                totle: "智能设备", family: ["家用摄像头", "智能早教机器人", "行车记录仪", "和目智能门锁", "和路由", "路由器双频", "和目C13摄像头", "更多"]
              }
            ],
            menuShow: false
          },
          {
            menuEvery: [
              {
                totle: "我的账户", family: ["账单查询", "详单查询", "套餐余量查询", "交费记录查询", "积分明细查询", "归属地查询", "我的卡券", "业务查询退订", "余额查询", ""]
              },
              {
                totle: "我的信息", family: ["个人信息", "收货地址", "发票信息", "安全设置", "我的发票", ""]
              },
              {
                totle: "我的优惠", family: ["1元1GB", ""]
              },
              {
                totle: "我的订单", family: ["商品订单", "预购订单", "充值订单", "我的收藏", ""]
              },
              {
                totle: "我的消息", family: ["消息订阅", "消息查看", "消息提醒设置", ""]
              },
              {
                totle: "售后服务", family: ["退货申请查询", ""]
              },
              {
                totle: "我的邮箱", family: ["139邮箱", ""]
              },
              {
                totle: "其它查询", family: ["自主品牌售后点", "终端售后点查询", "更多"]
              }
            ],
            menuShow: false
          },
          {
            menuEvery: [
              {
                totle: "优惠专区", family: ["华为 P40", "更多"]
              },
              {
                totle: "4G专区", family: ["4G手机", "4G套餐", "4G换卡", "4G知识", "更多"]
              },
              {
                totle: "国际/港澳台", family: ["国家和地区搜索", "推荐业务", "自助服务", "最新消息", "更多"]
              },
              {
                totle: "资费专区", family: ["4G资费", "国际/港澳台资费", "其它资费", "更多"]
              },
              {
                totle: "宽带专区", family: ["业务介绍", "宽带服务", "宽带问题知多少", "宽带提速降费专区", "更多"]
              },
              {
                totle: "咪咕专区", family: ["咪咕游戏", "咪咕圈圈", "咪咕音乐", "咪咕阅读", "更多"]
              }
            ],
            menuShow: false
          },
        ],
        favourData: [   // 优惠专区数据
          { title: "流量月包", produce: "套餐流量大升级", img: "image/favour/flowgb.png" },
          { title: "5G看移动", produce: "高速率、低时延、大容量", img: "image/favour/news5G.gif" },
          { title: "1元1GB·移动王卡", produce: "热门APP尽情刷", img: "image/favour/toldprice.png" },
          { title: "WLAN任我用", produce: "随时随地，随心使用", img: "image/favour/WLAN.png" },
          { title: "移动光宽带", produce: "畅游网络  资费更低", img: "image/favour/tele.png" },
          { title: "流量月包", produce: "套餐流量大升级", img: "image/favour/flowgb.png" },
          { title: "5G看移动", produce: "高速率、低时延、大容量", img: "image/favour/news5G.gif" },
          { title: "1元1GB·移动王卡", produce: "热门APP尽情刷", img: "image/favour/toldprice.png" },
          { title: "WLAN任我用", produce: "随时随地，随心使用", img: "image/favour/WLAN.png" },
          { title: "移动光宽带", produce: "畅游网络  资费更低", img: "image/favour/tele.png" }

        ],
        favourMove: 242,   // 单次移动的距离
        favourOveron: 1,  // 移动的倍数
        favourTime: null,  // 优惠专区无缝轮播时间
        jsonImp: [],   // 优惠专区轮播位置数据
        suv: true,
        FtitlR: [    // 手机专区3F局部导航
          "全部", "千元机", "信用购机", "华为", "小米", "iPhone"
        ],
        TwoFTex: [   // 手机专区3F数据信息
          {
            Two_topH4: "畅享套餐", Two_topP: "语音+流量套餐，总有一款适合你", Two_topImg: "image/maintent/TwoF/TwoF_down3.png",
            Two_downH4: "流量月包", Two_downP: "流量不用愁，包月来帮手", Two_downImg: "image/maintent/TwoF/TwoF_down4.jpg"
          },
          {
            Two_topH4: "宽带新装", Two_topP: "低价享高速宽带", Two_topImg: "image/maintent/TwoF/TwoF_down5.png",
            Two_downH4: "5G智享套餐", Two_downP: "各类权益享不停", Two_downImg: "image/maintent/TwoF/TwoF_down6.jpg"
          },
          {
            Two_topH4: "和家庭分享", Two_topP: "1人付费，全家享流量", Two_topImg: "image/maintent/TwoF/TwoF_down7.png",
            Two_downH4: "视频会员流量包", Two_downP: "专属会员，包含流量", Two_downImg: "image/maintent/TwoF/TwoF_down8.png"
          }
        ],
        OE_topT: [   // 手机专区3F(biggerIMG)数据信息
          { ThreeTalH4: "华为P40", ThreeTalCA: "5G手机", ThreeOver: "华为P40 5G手机", ThreeTalP: "超感知影像", ThreeTalSpan: "4,188元", Talimg: "image/maintent/ThreeF/ThreeF_down1.jpg" }
        ],
        ThreeFTex: [   // 手机专区3F数据信息
          {
            Three_topH4: "华为 Mate30", Three_topP: "徕卡摄像头", Three_topSpan: "3,699元", Three_topImg: "image/maintent/ThreeF/ThreeF_down2.jpg",
            Three_downH4: "iPhone11", Three_downP: "1200万像素双摄", Three_downSpan: "5,199元", Three_downImg: "image/maintent/ThreeF/ThreeF_down3.jpg"
          },
          {
            Three_topH4: "华为Mate30 Pro", Three_topP: "5G公开版手机", Three_topSpan: "6,399元", Three_topImg: "image/maintent/ThreeF/ThreeF_down4.png",
            Three_downH4: "红米 K30", Three_downP: "索尼6400万前后六摄", Three_downSpan: "1,999元", Three_downImg: "image/maintent/ThreeF/ThreeF_down5.png"
          },
          {
            Three_topH4: "华为P40 Pro", Three_topP: "5G手机", Three_topSpan: "5,688元", Three_topImg: "image/maintent/ThreeF/ThreeF_down6.jpg",
            Three_downH4: "红米 K30", Three_downP: "5G手机", Three_downSpan: "1,999元", Three_downImg: "image/maintent/ThreeF/ThreeF_down7.jpg"
          }
        ],
        ThreeFImg: [  // 手机专区3F（small）数据信息
          { img: "image/maintent/ThreeF/ThreeF_small/ThreeF_small1.jpg", titl: "苹果" }, { img: "image/maintent/ThreeF/ThreeF_small/ThreeF_small2.jpg", titl: "华为" },
          { img: "image/maintent/ThreeF/ThreeF_small/ThreeF_small3.jpg", titl: "小米" }, { img: "image/maintent/ThreeF/ThreeF_small/ThreeF_small4.jpg", titl: "三星" },
          { img: "image/maintent/ThreeF/ThreeF_small/ThreeF_small5.jpg", titl: "OPPO" }, { img: "image/maintent/ThreeF/ThreeF_small/ThreeF_small6.jpg", titl: "VIVO" },
          { img: "image/maintent/ThreeF/ThreeF_small/ThreeF_small7.jpg", titl: "洛基亚" }, { img: "image/maintent/ThreeF/ThreeF_small/ThreeF_small8.jpg", titl: "天语" },
          { img: "image/maintent/ThreeF/ThreeF_small/ThreeF_small9.jpg", titl: "飞利浦" }, { img: "image/maintent/ThreeF/ThreeF_small/ThreeF_small10.jpg", titl: "中国移动" },
        ],
        FourData:[
          {
            hre: "#", fouH4: "和目C13智能摄像头", fouP: "双向语音 红外夜视", fouSpan: "229元", img: "image/maintent/FourF/FourF_down1.png", fouTemp: true
          },
          {
            hre: "#", fouH4: "", fouP: "中国移动无线充电器快充", fouSpan: "39元", img: "image/maintent/FourF/FourF_down2.png", fouTemp: false
          },
          {
            hre: "#", fouH4: "", fouP: "和路通X2智能后视镜", fouSpan: "售罄", img: "image/maintent/FourF/FourF_down3.png", fouTemp: false
          },
          {
            hre: "#", fouH4: "", fouP: "中国移动千里眼A11", fouSpan: "售罄", img: "image/maintent/FourF/FourF_down4.jpg", fouTemp: false
          }
        ],
        GamesF: [  // 5F咪咕娱乐
          "全部", "王者荣耀", "拉贝日记", "一生所爱"
        ],
        selectL: [  // 5F 左选框
          { title: "咪咕音乐", prod: "放肆听 趣玩乐" },
          { title: "咪咕游戏", prod: "快乐一触即发" },
          { title: "咪咕阅读", prod: "听有趣 阅不同" },
          { title: "咪咕圈圈", prod: "次元C站 给你好看	" }
        ],
        storeValue: 0,
        selectCard: [  // 5F 切换栏
          {
            card1: [{
              title: "新歌打榜",
              em: [
                { first: "1/2", flas: true },
                { first: "2/2", flas: false }
              ],
              img: [
                {
                  hre: [
                    { inp: "image/maintent/FiveF/selectF_1/One/selectF_01.jpg", total: "猫", taking: "阿暖" },
                    { inp: "image/maintent/FiveF/selectF_1/One/selectF_02.jpg", total: "如果你要毁灭世界", taking: "李润祺" },
                    { inp: "image/maintent/FiveF/selectF_1/One/selectF_03.jpg", total: "虚构", taking: "赵雪莉" },
                    { inp: "image/maintent/FiveF/selectF_1/One/selectF_04.jpg", total: "幸福的主角", taking: "高安+李佳丹" },
                    { inp: "image/maintent/FiveF/selectF_1/One/selectF_05.jpg", total: "相约世界", taking: "张靓颖+蔡国庆+张杰+白雪" }
                  ],
                  flug: true
                },
                {
                  hre: [
                    { inp: "image/maintent/FiveF/selectF_1/One/selectF_11.jpg", total: "时间飞行", taking: "白宇,朱一龙" },
                    { inp: "image/maintent/FiveF/selectF_1/One/selectF_12.jpg", total: "戎对妆", taking: "容祖儿" },
                    { inp: "image/maintent/FiveF/selectF_1/One/selectF_13.jpg", total: "熙熙攘攘", taking: "金志文" },
                    { inp: "image/maintent/FiveF/selectF_1/One/selectF_14.jpg", total: "载入史册", taking: "梁龙" },
                    { inp: "image/maintent/FiveF/selectF_1/One/selectF_15.jpg", total: "忽而今夏", taking: " 汪苏泷" }
                  ],
                  flug: false
                }

              ]
            }],
            ove: true
          },
          {
            card1: [{
              title: "热门游戏",
              em: [
                { first: "1/2", flas: true },
                { first: "2/2", flas: false }
              ],
              img: [
                {
                  hre: [
                    { inp: "image/maintent/FiveF/selectF_1/Two/selectF_01.jpg", total: "我的汉克狗", taking: "149.90MB" },
                    { inp: "image/maintent/FiveF/selectF_1/Two/selectF_02.jpg", total: "街头篮球", taking: "522.61MB" },
                    { inp: "image/maintent/FiveF/selectF_1/Two/selectF_03.jpg", total: "王者荣耀", taking: "1.38GB" },
                    { inp: "image/maintent/FiveF/selectF_1/Two/selectF_04.jpg", total: "率土之滨", taking: "380.87MB" },
                    { inp: "image/maintent/FiveF/selectF_1/Two/selectF_05.jpg", total: "龙之谷", taking: "1.10GB" }
                  ],
                  flug: true
                },
                {
                  hre: [
                    { inp: "image/maintent/FiveF/selectF_1/Two/selectF_11.jpg", total: "熊出没之机甲熊大", taking: "66.32MB" },
                    { inp: "image/maintent/FiveF/selectF_1/Two/selectF_12.jpg", total: "火影忍者", taking: "871.62MB" },
                    { inp: "image/maintent/FiveF/selectF_1/Two/selectF_13.jpg", total: "跳舞的线", taking: "122.58MB" },
                    { inp: "image/maintent/FiveF/selectF_1/Two/selectF_14.jpg", total: "兽王争霸", taking: "9.97MB" },
                    { inp: "image/maintent/FiveF/selectF_1/Two/selectF_15.jpg", total: "捕鱼来了", taking: "303.52MB" }
                  ],
                  flug: false
                }

              ]
            }],
            ove: false
          },
          {
            card1: [{
              title: "重磅推荐",
              em: [
                { first: "1/2", flas: true },
                { first: "2/2", flas: false }
              ],
              img: [
                {
                  hre: [
                    { inp: "image/maintent/FiveF/selectF_1/Three/selectF_01.jpg", total: "爱有千钧力", taking: "巴巴拉-卡特兰" },
                    { inp: "image/maintent/FiveF/selectF_1/Three/selectF_02.jpg", total: "暗涌", taking: "赵石" },
                    { inp: "image/maintent/FiveF/selectF_1/Three/selectF_03.jpg", total: "冰霜美人计", taking: "卡洛儿·莫特" },
                    { inp: "image/maintent/FiveF/selectF_1/Three/selectF_04.jpg", total: "星魂", taking: "六道口" },
                    { inp: "image/maintent/FiveF/selectF_1/Three/selectF_05.jpg", total: "古董商", taking: "晁会想" }
                  ],
                  flug: true
                },
                {
                  hre: [
                    { inp: "image/maintent/FiveF/selectF_1/Three/selectF_11.jpg", total: "神魔绝恋", taking: "寂寞独舞" },
                    { inp: "image/maintent/FiveF/selectF_1/Three/selectF_12.jpg", total: "五龙图腾", taking: "一生一世人" },
                    { inp: "image/maintent/FiveF/selectF_1/Three/selectF_13.jpg", total: "歌剧魅影", taking: "卡斯顿·勒胡" },
                    { inp: "image/maintent/FiveF/selectF_1/Three/selectF_14.jpg", total: "作战", taking: "秦聆" },
                    { inp: "image/maintent/FiveF/selectF_1/Three/selectF_15.jpg", total: "异世战甲", taking: "常普" }
                  ],
                  flug: false
                }

              ]
            }],
            ove: false
          },
          {
            card1: [{
              title: "精品动漫",
              em: [
                { first: "1/2", flas: true },
                { first: "2/2", flas: false }
              ],
              img: [
                {
                  hre: [
                    { inp: "image/maintent/FiveF/selectF_1/Four/selectF_01.jpg", total: "虚拟临界", taking: " 科幻" },
                    { inp: "image/maintent/FiveF/selectF_1/Four/selectF_02.jpg", total: "头号偶像", taking: "情感|校园|都市" },
                    { inp: "image/maintent/FiveF/selectF_1/Four/selectF_03.jpg", total: "青柠之夏", taking: "搞笑|校园" },
                    { inp: "image/maintent/FiveF/selectF_1/Four/selectF_04.jpg", total: "十二奇缘", taking: " 搞笑|情感|萌系" },
                    { inp: "image/maintent/FiveF/selectF_1/Four/selectF_05.jpg", total: " 料理女王", taking: "情感|搞笑|都市" }
                  ],
                  flug: true
                },
                {
                  hre: [
                    { inp: "image/maintent/FiveF/selectF_1/Four/selectF_11.jpg", total: "无心幻异录", taking: "情感|热血|玄幻" },
                    { inp: "image/maintent/FiveF/selectF_1/Four/selectF_12.jpg", total: "玉面神探", taking: "搞笑|悬疑|武侠" },
                    { inp: "image/maintent/FiveF/selectF_1/Four/selectF_13.jpg", total: "国王万岁", taking: "搞笑|热血" },
                    { inp: "image/maintent/FiveF/selectF_1/Four/selectF_14.jpg", total: "名将逆天", taking: "搞笑|科幻|热血" },
                    { inp: "image/maintent/FiveF/selectF_1/Four/selectF_15.jpg", total: "至黑之夜", taking: "热血" }
                  ],
                  flug: false
                }

              ]
            }],
            ove: false
          }
        ],
        TmgHre: [
          { up: "image/maintent/FiveF/selectFbg.jpg", titl: "送你一匹马" }
        ],
        selectPour: [  // 5F 切换栏  右下
          {
            title: "流行乐风向标",
            em: [
              { first: "1/2", flas: true },
              { first: "2/2", flas: false }
            ],
            img: [
              {
                hre: [
                  { inp: "image/maintent/FiveF/selectF_2/selectF_01.jpg", total: "再也没有" },
                  { inp: "image/maintent/FiveF/selectF_2/selectF_02.jpg", total: "淡黄色调的忧郁" },
                  { inp: "image/maintent/FiveF/selectF_2/selectF_03.jpg", total: "Beggar" },
                  { inp: "image/maintent/FiveF/selectF_2/selectF_04.jpg", total: "天鹅之歌" },
                  { inp: "image/maintent/FiveF/selectF_2/selectF_05.jpg", total: "盗火" }
                ],
                flug: true
              },
              {
                hre: [
                  { inp: "image/maintent/FiveF/selectF_2/selectF_11.jpg", total: "初见初恋" },
                  { inp: "image/maintent/FiveF/selectF_2/selectF_12.jpg", total: "听雪" },
                  { inp: "image/maintent/FiveF/selectF_2/selectF_13.jpg", total: "我好想盘你" },
                  { inp: "image/maintent/FiveF/selectF_2/selectF_14.jpg", total: "菩提偈" },
                  { inp: "image/maintent/FiveF/selectF_2/selectF_15.jpg", total: "相约世界" }
                ],
                flug: false
              }
            ]
          }],
        likeData: [    // 猜你喜欢
          {
            likes: [
              {
                total: "和娱乐包", price: "0.00元", img: "image/likes/likes_01.png", hre: "#",
                title: "轻松上网，一键搞定！种类多、选择多，越高越优惠。没有流量了？快点充流量开启你的手机冲浪模式！", prod: "轻松上网，一键搞定！种类多、选择多，越高越优惠。没有流量了？..."
              },
              {
                total: "阿里全系包", price: "9.00元", img: "image/likes/likes_02.png", hre: "#",
                title: "轻松上网，一键搞定！种类多、选择多，越高越优惠。没有流量了？快点充流量开启你的手机冲浪模式！", prod: "轻松上网，一键搞定！种类多、选择多，越高越优惠。没有流量了？..."
              },
              {
                total: "停开机", price: "0.00元", img: "image/likes/likes_03.png", hre: "#",
                title: "轻松上网，一键搞定！种类多、选择多，越高越优惠。没有流量了？快点充流量开启你的手机冲浪模式！", prod: "轻松上网，一键搞定！种类多、选择多，越高越优惠。没有流量了？..."
              },
              {
                total: "微博包", price: "10.00元", img: "image/likes/likes_04.jpg", hre: "#",
                title: "轻松上网，一键搞定！种类多、选择多，越高越优惠。没有流量了？快点充流量开启你的手机冲浪模式！", prod: "轻松上网，一键搞定！种类多、选择多，越高越优惠。没有流量了？..."
              }, {
                total: "全网追剧流量包（活动版）", price: "18.00元", img: "image/likes/likes_05.png", hre: "#",
                title: "轻松上网，一键搞定！种类多、选择多，越高越优惠。没有流量了？快点充流量开启你的手机冲浪模式！", prod: "轻松上网，一键搞定！种类多、选择多，越高越优惠。没有流量了？..."
              }

            ],
            sug: true
          },
          {
            likes: [
              {
                total: "来电提醒", price: "3.00元", img: "image/likes/likes_11.jpg", hre: "#",
                title: "轻松上网，一键搞定！种类多、选择多，越高越优惠。没有流量了？快点充流量开启你的手机冲浪模式！", prod: "轻松上网，一键搞定！种类多、选择多，越高越优惠。没有流量了？..."
              },
              {
                total: "芒果TV流量包（活动版）", price: "9.00元", img: "image/likes/likes_12.jpg", hre: "#",
                title: "轻松上网，一键搞定！种类多、选择多，越高越优惠。没有流量了？快点充流量开启你的手机冲浪模式！", prod: "轻松上网，一键搞定！种类多、选择多，越高越优惠。没有流量了？..."
              },
              {
                total: "来电卫士", price: "0.00元", img: "image/likes/likes_13.jpg", hre: "#",
                title: "骚扰电话提醒", prod: "骚扰电话提醒"
              },
              {
                total: "百度爱奇艺流量包（活动版）", price: "9.00元", img: "image/likes/likes_14.jpg", hre: "#",
                title: "轻松上网，一键搞定！种类多、选择多，越高越优惠。没有流量了？快点充流量开启你的手机冲浪模式！", prod: "轻松上网，一键搞定！种类多、选择多，越高越优惠。没有流量了？..."
              }, {
                total: "头条抖音流量包（活动版）", price: "9.00元", img: "image/likes/likes_15.jpg", hre: "#",
                title: "轻松上网，一键搞定！种类多、选择多，越高越优惠。没有流量了？快点充流量开启你的手机冲浪模式！", prod: "轻松上网，一键搞定！种类多、选择多，越高越优惠。没有流量了？..."
              }

            ],
            sug: false
          },
          {
            likes: [
              {
                total: "阿里优酷流量包（活动版）", price: "9.00元", img: "image/likes/likes_21.png", hre: "#",
                title: "轻松上网，一键搞定！种类多、选择多，越高越优惠。没有流量了？快点充流量开启你的手机冲浪模式！", prod: "轻松上网，一键搞定！种类多、选择多，越高越优惠。没有流量了？..."
              },
              {
                total: "流量月包", price: "20.00元", img: "image/likes/likes_22.jpg", hre: "#",
                title: "轻松上网，一键搞定！种类多、选择多，越高越优惠。没有流量了？快点充流量开启你的手机冲浪模式！", prod: "轻松上网，一键搞定！种类多、选择多，越高越优惠。没有流量了？..."
              },
              {
                total: "【熠天海纳】魅族16s 128GB 公开版4G智能手机", price: "3198.00元", img: "image/likes/likes_23.jpg", hre: "#",
                title: "新品现货 顺丰速发", prod: "新品现货 顺丰速发"
              },
              {
                total: "OPPO Find X2 Pro兰博基尼版 12+512G手机 ", price: "12999.00元", img: "image/likes/likes_24.jpg", hre: "#",
                title: "购机专享OPPO 46mm智能手表豪礼", prod: "购机专享OPPO 46mm智能手表豪礼"
              }, {
                total: "华为P30 Pro 全网通4G智能手机", price: "3506.00元", img: "image/likes/likes_25.jpg",
                title: "中国移动终端，安全可靠，等你选购！邂逅好货，发现理想生活，抢低价大牌手机！新潮黑科技，好货抢先用！", prod: "中国移动终端，安全可靠，等你选购！邂逅好货，发现理想生活，抢..."
              }

            ],
            sug: false
          },
          {
            likes: [
              {
                total: "【优惠购机】中兴天机Axon 10 Pro 5G版 智能手机", price: "4399.00元", img: "image/likes/likes_31.jpg", hre: "#",
                title: "信用购机最高优惠3780元 *仅支持部分省份  优惠购机享600元优惠", prod: "信用购机最高优惠3780元 *仅支持部分省份  优惠购机享600元优惠"
              },
              {
                total: "【优惠购机】中国移动5G手机 先行者X1 128GB", price: "4299.00元", img: "image/likes/likes_32.jpg", hre: "#",
                title: "中国移动终端，安全可靠，等你选购！邂逅好货，发现理想生活，抢低价大牌手机！新潮黑科技，好货抢先用！", prod: "中国移动终端，安全可靠，等你选购！邂逅好货，发现理想生活，抢..."
              },
              {
                total: "vivo iQOO Pro 5G版全网通智能手机", price: "3319.00元", img: "image/likes/likes_33.jpg", hre: "#",
                title: "购机多重礼包抢先选 礼包最高价值398元", prod: "购机多重礼包抢先选 礼包最高价值398元"
              },
              {
                total: "【优惠购机】iPhone11 Pro Max（A2220）公开版", price: "7899.00元", img: "image/likes/likes_34.jpg", hre: "#",
                title: "信用购机最高优惠3780元 *购机享好礼", prod: "信用购机最高优惠3780元 *购机享好礼"
              }, {
                total: "【限量秒杀优惠】小米10 双模5G手机 8+256G", price: "3999.00元", img: "image/likes/likes_35.jpg", hre: "#",
                title: "秒杀购机最高优惠300元", prod: "秒杀购机最高优惠300元"
              }

            ],
            sug: false
          }
        ],
        likeNum: 0,
        featData: [   // 特色专区
          {
            hre: "#", img: "image/items/items1.jpg", total: "国际/港澳台业务专区", prdu: "随时随地，沟通不下线"
          },
          {
            hre: "#", img: "image/items/items2.png", total: "资费专区", prdu: "自由选择，随心组合"
          },
          {
            hre: "#", img: "image/items/items3.jpg", total: "VoLTE专区", prdu: "高品质音、视频通话服务"
          },
          {
            hre: "#", img: "image/items/items4.jpg", total: "宽带专区", prdu: "畅快网络，极速光纤全家共享"
          }
        ],
        noticeData: [   // 公告数据
          {
            hre: "#", title: "5G服务珠峰高程测量  中国移动通信保障很给力", time: "2020-04-30", flag: true
          },
          {
            hre: "#", title: "【紧急公告】关于4月28日系统升级的公告", time: "2020-04-28", flag: true
          },
          {
            hre: "#", title: "中国移动门户网站3月26日23：00至3月27日7：00系统升级公告", time: "2020-03-23", flag: false
          },
          {
            hre: "#", title: "【紧急公告】关于4月30日系统升级的公告", time: "2020-04-30", flag: false
          }
        ],
        noticeTime: null,
        noticeNum: 1,
        countryData: [    // 国资动态
          {
            hre: "#", title: "国务院国资委召开地方国资委负责人会议 凝心聚力锐意进取 为确保全面建成小康社会作出国资国企新贡献", time: "2020-01-12"
          },
          {
            hre: "#", title: "中央企业负责人会议在京召开  贯彻落实党中央决策部署 在确保全面建成小康社会中展现国资央企使命担当", time: "2019-12-25"
          },
          {
            hre: "#", title: "郝鹏主持召开中央企业经济运行座谈会和宏观经济及重点行业专家座谈会强调  推动央企稳增长高质量发展发挥在国民经济中的“稳定器”作用 ", time: "2019-11-17"
          },
          {
            hre: "#", title: "国资委党委深入传达学习党的十九届四中全会精神  对国资委机关、中央企业和直管协会学习贯彻工作进行部署", time: "2019-11-09"
          }
        ],
        bottomProduce: [   // 链接区数据
          {
            title: "服务渠道",
            news: [
              { wal: "自助终端", hre: "#" },
              { wal: "10086热线", hre: "#" },
              { wal: "实体营业厅", hre: "#" },
              { wal: "短信营业厅", hre: "#" },
              { wal: "网上营业厅", hre: "#" },
              { wal: "客户端/掌上营业厅", hre: "#" }
            ]
          },
          {
            title: "站点导航",
            news: [
              { wal: "MM", hre: "#" },
              { wal: "和飞信", hre: "#" },
              { wal: "和包", hre: "#" },
              { wal: "咪咕阅读", hre: "#" },
              { wal: "139邮箱", hre: "#" },
              { wal: "能力开放商店", hre: "#", img: "image/hot.png", sows: true }
            ]
          },
          {
            title: "便捷服务",
            news: [
              { wal: "账单查询", hre: "#" },
              { wal: "详单查询", hre: "#" },
              { wal: "套餐余量查询", hre: "#" },
              { wal: "业务状态查询", hre: "#" },
              { wal: "合作管理平台", hre: "#" },
              { wal: "资料下载中心", hre: "#" }
            ]
          },
          {
            title: "产品推荐",
            news: [
              { wal: "资费专区", hre: "#" },
              { wal: "畅享套餐", hre: "#" },
              { wal: "家庭宽带", hre: "#" },
              { wal: "流量月包", hre: "#" },
              { wal: "移动王卡", hre: "#" },
              { wal: "客户服务密码", hre: "#" }
            ]
          },
          {
            title: "服务指南",
            news: [
              { wal: "购物指南", hre: "#" },
              { wal: "付款方式", hre: "#" },
              { wal: "物流配送", hre: "#" },
              { wal: "售后服务", hre: "#" },
              { wal: "个人中心", hre: "#" },
              { wal: "网站服务协议", hre: "#" }
            ]
          }
        ],
        footDataP1: [  // 尾页数据 p1
          { hre: "#", dta: "新闻中心" },
          { hre: "#", dta: "诚聘英才" },
          { hre: "#", dta: "企业合作" },
          { hre: "#", dta: "站点导航" },
          { hre: "#", dta: "中移信息技术公司" },
          { hre: "#", dta: "中国移动香港公司" },
          { hre: "#", dta: "政企客户分公司" },
          { hre: "#", dta: "数字家庭合作联盟" },
          { hre: "#", dta: "网站地图" },
          { hre: "#", dta: "友情链接" },
          { hre: "#", dta: "扫黄打非举报" },
          { hre: "#", dta: "打击传销" }
        ],

      },
      computed: { // 计算属性
        sortProvince() {  // 按顺序对省份进行操作
          this.province.sort(     // 省份排序
            function compareFunction(param1, param2) {
              return param1.localeCompare(param2, "zh");
            }
          )
          // 向新数组添加数据
          for (let i = 0; i < this.province.length; i++) {
            this.newProvince.push({ id: ConvertPinyin(this.province[i].charAt(0)).charAt(0), title: this.province[i] })
          }
          // 多音字问题
          for (let i = 0; i < this.newProvince.length; i++) {
            // 重庆首字为多音字，需要判断
            if (this.newProvince[i].title === "重庆") {
              this.newProvince[i].id = "C";
            }
          }
          // 位置调换
          let change = null;
          change = this.newProvince[0];
          this.newProvince[0] = this.newProvince[1];
          this.newProvince[1] = change;
          return this.newProvince;  // 返回值
        }
      },
      mounted() {  // 页面加载
        this.sortProvince; // 需要触发的属性
        let _this = this;
        // 鼠标点击页面元素
        document.onclick = function mouseClick(eve) {
          if (eve) {  // 谷歌火狐
            // 判断
            if (eve.target.id === "slidedown") {
              // 显示
              _this.flag = true;
            } else {
              // 隐藏
              _this.flag = false;
            }
          } else if (window.event) {  // IE
            // 判断
            if (window.event.srcElement.id === "slidedown") {
              // 显示
              _this.flag = true;
            } else {
              // 隐藏
              _this.flag = false;
            }
          }
        }
        this.$refs.lookImage[0].classList.add("active"); // 第一张图片淡入
        // this.$refs.content.style.backgroundColor = this.lookimg[0].bg; // 第一张图片的背景色
        this.$refs.maku[0].classList.add("maskcolor"); // 默认显示第一个小圆点样式
        // 添加促销标记
        let icons_span = document.createElement("span");
        icons_span.innerText = "促";
        this.$refs.icons[this.$refs.icons.length - 1].appendChild(icons_span);
        this.TimeData();  // 调用轮播图
        this.clearStyle();  // 清除默认样式
        for (let i = 0; i < this.$refs.menuRight.length; i++) {   // 删除因数据添加造成的menuRight元素生成两个子节点的最后一个子节点问题
          this.$refs.menuRight[i].removeChild(this.$refs.menuRight[i].lastChild)
        }
        console.log(this.jsonImp);
        // 优惠专区存储数据
        for (let i = 1; i <= this.favourData.length / 2; i++) {
          this.jsonImp.push({ "left": -this.favourMove * i })
        };
        // 默认向左移动一格
        animate(this.$refs.favour_mater, this.jsonImp[0], function () {
          this.suv = false;
        });
        this.favourVolunRt();  // 优惠专区无缝轮播
        // 默认选项卡样式
        this.$refs.selectOver[0].classList.add("selectMouse");
        this.$refs.selectLH4[0].classList.add("slectColor");
        // 滚轮滚动效果  搜索框
        window.onscroll = function () {   // 页面滚动事件
          // 获取元素
          let floatBox = document.getElementsByClassName("floatBox")[0];
          // 判断何时出现
          if (getPageScroll().ScrollTop >= 600) {
            //设置boxScroll的top元素
            floatBox.style.display = "block";
          } else {
            //设置boxScroll的top元素
            floatBox.style.display = "none";
          }

        }
        // 默认显示
        this.noticeVolun();   // 公告信息轮播
        // 清除尾页的链接last |
        this.$refs.bar[this.$refs.bar.length - 1].remove(this.$refs.bar[this.$refs.bar.length - 1]);
      },
      methods: {
        overs() {   // 获取焦点弹出客户端二维码
          let client = document.getElementsByClassName("client")[0];
          client.classList.add("classbg")
        },
        outs() {    // 失去焦点隐藏客户端二维码
          let client = document.getElementsByClassName("client")[0];
          client.classList.remove("classbg")
        },
        TimeData() {  // 自动轮播
          this.timer = setInterval(() => {
            this.$refs.maku[this.num].classList.remove("maskcolor");  // 清除上一个样式
            this.$refs.lookImage[this.num].classList.remove("active"); //图片淡出
            this.num++;
            // 判断
            if (this.num >= this.$refs.lookImage.length) {
              this.num = 0;
            }
            // this.$refs.content.style.backgroundColor = this.lookimg[this.num].bg;   // 显示该图片的背景颜色
            this.$refs.maku[this.num].classList.add("maskcolor");  // 显示小圆点样式
            this.$refs.lookImage[this.num].classList.add("active");  // 图片淡入
          }, 3400);
        },
        stopTimer() {   // 获取焦点时停止轮播
          clearInterval(this.timer);
        },
        startTimer() {   // 失去焦点时继续轮播
          this.TimeData();
        },
        prev() {   // 点击轮播图左键
          this.$refs.maku[this.num].classList.remove("maskcolor");  // 清除上一个样式
          this.$refs.lookImage[this.num].classList.remove("active"); //图片淡出
          this.num--;
          if (this.num < 0) {
            this.num = 8;
          }
          // this.$refs.content.style.backgroundColor = this.lookimg[this.num].bg;   // 显示该图片的背景颜色
          this.$refs.maku[this.num].classList.add("maskcolor");  // 显示小圆点样式
          this.$refs.lookImage[this.num].classList.add("active");  // 图片淡入
        },
        next() {    // 点击轮播图右键
          this.$refs.maku[this.num].classList.remove("maskcolor");  // 清除上一个样式
          this.$refs.lookImage[this.num].classList.remove("active"); //图片淡出
          this.num++;
          if (this.num >= this.$refs.lookImage.length) {
            this.num = 0;
          }
          // this.$refs.content.style.backgroundColor = this.lookimg[this.num].bg;   // 显示该图片的背景颜色
          this.$refs.maku[this.num].classList.add("maskcolor");  // 显示小圆点样式
          this.$refs.lookImage[this.num].classList.add("active");  // 图片淡入
        },
        touchOn(index) {   // 点击小圆点的样式
          let ram; // 定义一个虚拟值存储点击之前的索引值
          ram = this.num;  // 存储值
          this.num = index; // 将当前点击的小圆点索引值给予图片索引
          for (let i = 0; i < this.$refs.maku.length; i++) {  // 清除小圆点其他样式
            this.$refs.maku[i].classList.remove("maskcolor");
          }
          this.$refs.lookImage[ram].classList.remove("active"); //图片淡出
          this.$refs.content.style.backgroundColor = this.lookimg[this.num].bg;   // 显示该图片的背景颜色
          this.$refs.maku[this.num].classList.add("maskcolor");  // 显示小圆点样式
          this.$refs.lookImage[this.num].classList.add("active");  // 图片淡入
        },
        clearStyle() {    // 清空选中后的样式还原成默认样式
          this.$refs.money_num.children[0].classList.add("changeNum");  // 默认选中充值数量30
          // 点击充值数量改变样式
          for (let i = 0; i < this.$refs.money_num.children.length; i++) {
            this.$refs.money_num.children[i].onclick = function () {
              for (let j = 0; j < this.parentNode.children.length; j++) {
                this.parentNode.children[j].classList.remove("changeNum");
              }
              this.classList.add("changeNum");
            }
          }
        },
        clickFlow() {    // 充值流量数额
          this.$refs.tags.classList.remove("texts");
          this.$refs.tabs.classList.add("texts");
          if (this.nav) {
            this.doubleNum = this.priceNum;
            this.priceNum = this.flowNum;
            this.flowNum = this.doubleNum;
            this.nav = false;
            for (let i = 0; i < this.$refs.money_num.children.length; i++) {
              this.$refs.money_num.children[i].classList.remove("changeNum");
            }
            this.$refs.money_num.children[0].classList.add("changeNum");  // 默认选中充值数量30
          }


        },
        clickPrice() {   // 充值人民币数额
          this.$refs.tabs.classList.remove("texts");
          this.$refs.tags.classList.add("texts");
          if (!this.nav) {
            this.doubleNum = this.priceNum;
            this.priceNum = this.flowNum;
            this.flowNum = this.doubleNum;
            this.nav = true;
            for (let i = 0; i < this.$refs.money_num.children.length; i++) {
              this.$refs.money_num.children[i].classList.remove("changeNum");
            }
            this.$refs.money_num.children[0].classList.add("changeNum");  // 默认选中充值数量30
          }
        },
        getIndex(index) {   // 二级菜单出现
          // 清空
          for (let i = 0; i < 7; i++) {
            this.menuOver[i].menuShow = false;
            this.$refs.menuStyle[i].classList.remove("menuStyle");
          }
          this.menuOver[index].menuShow = true;
          this.$refs.menuStyle[index].classList.add("menuStyle");
          for (let j = 0; j < this.$refs.genre.length; j++) {   // 当二级菜单中没有文字更多出现时改变样式
            if (this.$refs.genre[j].innerText == "") {
              this.$refs.genre[j].style.cursor = "default";
              this.$refs.genre[j].removeAttribute("href");
            }
          }
          // 隐藏点击的地址
          this.flag = false;

        },
        setIndex(index) {  // 二级菜单隐藏
          // 清空
          for (let i = 0; i < 7; i++) {
            this.menuOver[i].menuShow = false;
            this.$refs.menuStyle[i].classList.remove("menuStyle");
          }
        },
        favourVolunLf() {   // 优惠专区向右无缝轮播  待定
          clearInterval(this.favourTime);
          // this.favourTime = setInterval(() => {
          //   if (this.suv) {   // 判断
          //     this.jsonImp.unshift(this.jsonImp.pop());  //向数组的开头添加元素（删除并返回数组的最后一个元素）   
          //     // 调用函数
          //     this.favourLoadImgRt();
          //   }
          // }, 4100);
        },
        favourVolunRt() {   // 优惠专区向右无缝轮播  待定
          clearInterval(this.favourTime);
          for (let i = 1; i <= this.favourData.length / 2; i++) {
            this.jsonImp.push({ "left": -this.favourMove * i })
          };
          this.favourTime = setInterval(() => {
            console.log(11);
            if (this.suv) {   // 判断
              this.jsonImp.push(this.jsonImp.shift());
              // 调用函数
              this.favourLoadImgRt();
            }
          }, 4100);
        },
        favourLoadImgRt() {     // 优惠专区向右加载图片
          if (this.$refs.favour_mater.style.left == "-1210px") {  // 重新开始轮播
            this.$refs.favour_mater.style.left = "0px";
          } else if (this.$refs.favour_mater.style.left == "0px") {  // 重新开始轮播
            this.$refs.favour_mater.style.left = "-1210px";
          }
          for (let i = 0; i <= this.favourData.length / 2 - 1; i++) {
            //设置每个div的style元素
            animate(this.$refs.favour_mater, this.jsonImp[i], function () {
              this.suv = true;
            });
          }
        },
        selectStyle(index) {   // 选项卡样式
          for (let i = 0; i < this.$refs.selectOver.length; i++) {
            this.$refs.selectOver[i].classList.remove("selectMouse");
            this.$refs.selectLH4[i].classList.remove("slectColor");
          }
          this.$refs.selectOver[index].classList.add("selectMouse");
          this.$refs.selectLH4[index].classList.add("slectColor");
          this.storeValue = this.$refs.selectOver[index].dataset.index;
          for (let j = 0; j < this.selectCard.length; j++) {
            this.selectCard[j].ove = false;
          }
          this.selectCard[this.storeValue].ove = true;
          // 还原选项卡默认样式
          for (let i = 0; i < this.selectCard[this.storeValue].card1[0].em.length; i++) {
            this.selectCard[this.storeValue].card1[0].em[i].flas = false;
            this.selectCard[this.storeValue].card1[0].img[i].flug = false;
          }

          this.selectCard[this.storeValue].card1[0].em[0].flas = true;
          this.selectCard[this.storeValue].card1[0].img[0].flug = true;

        },
        txtPre() {  // 上一页
          for (let i = 0; i < this.selectCard[this.storeValue].card1[0].em.length; i++) {
            this.selectCard[this.storeValue].card1[0].em[i].flas = false;
            this.selectCard[this.storeValue].card1[0].img[i].flug = false;
          }

          this.selectCard[this.storeValue].card1[0].em[0].flas = true;
          this.selectCard[this.storeValue].card1[0].img[0].flug = true;
        },
        txtNext() {   // 下一页
          for (let i = 0; i < this.selectCard[this.storeValue].card1[0].em.length; i++) {
            this.selectCard[this.storeValue].card1[0].em[i].flas = false;
            this.selectCard[this.storeValue].card1[0].img[i].flug = false;
          }

          this.selectCard[this.storeValue].card1[0].em[1].flas = true;
          this.selectCard[this.storeValue].card1[0].img[1].flug = true;
        },
        pourPre() {  // 上一页 右下
          for (let i = 0; i < this.selectPour[0].em.length; i++) {
            this.selectPour[0].em[i].flas = false;
            this.selectPour[0].img[i].flug = false;
          }

          this.selectPour[0].em[0].flas = true;
          this.selectPour[0].img[0].flug = true;
        },
        pourNext() {   // 下一页  右下
          for (let i = 0; i < this.selectPour[0].em.length; i++) {
            this.selectPour[0].em[i].flas = false;
            this.selectPour[0].img[i].flug = false;
          }

          this.selectPour[0].em[1].flas = true;
          this.selectPour[0].img[1].flug = true;
        },
        likeChan() {  // 猜你喜欢切换 换一批
          // 判断
          if (this.likeNum == 3) {   // 重新开始
            this.likeNum = 0;
          } else {
            this.likeNum++;   // 索引值加1
          }
          // true / false
          // 清空选中前样式
          for (let i = 0; i < this.likeData.length; i++) {
            this.likeData[i].sug = false;
          }
          this.likeData[this.likeNum].sug = true;

        },
        noticeVolun() {   // 公告信息轮播
          // 自动轮播
          this.noticeTime = setInterval(() => {
            this.noticeNum++;
            // 判断
            if (this.noticeNum === this.noticeData.length) {
              this.noticeNum = 1;
            }
            for (let i = 1; i < this.noticeData.length; i++) {
              this.noticeData[i].flag = false;
            }
            this.noticeData[this.noticeNum].flag = true;

          }, 4000);
        },
        noticeLef() {  // 公告信息切换 left
          // 暂停
          clearInterval(this.noticeTime);
          this.noticeNum--;
          // 判断
          if (this.noticeNum === 0) {
            this.noticeNum = this.noticeData.length - 1;
          }
          for (let i = 1; i < this.noticeData.length; i++) {
            this.noticeData[i].flag = false;
          }
          this.noticeData[this.noticeNum].flag = true;
          // 继续轮播
          this.noticeVolun();
        },
        noticeRig() {  // 公告信息切换 right
          // 暂停
          clearInterval(this.noticeTime);
          this.noticeNum++;
          // 判断
          if (this.noticeNum === this.noticeData.length) {
            this.noticeNum = 1;
          }
          for (let i = 1; i < this.noticeData.length; i++) {
            this.noticeData[i].flag = false;
          }
          this.noticeData[this.noticeNum].flag = true;
          // 继续轮播
          this.noticeVolun();

        }

      }

    })
  </script>
</body>

</html>